<template>
  <!-- 催收执行页-通讯录模块-地址簿 -->
  <section class="component address-list">
    <el-row justify="space-between" type="flex" v-if="!hiddenAction && menuChannel !== 44 && menuChannel !== 34 && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 58">
      <el-col :span="18" style="padding-left:10px;">
        <el-button @click="addAddressClick" plain type="primary"
          >新增地址</el-button
        >
      </el-col>
    </el-row>
    <!-- 数据区域 -->
    <data-box :data="dataSet">
      <template slot="columns">
        <el-table-column
          label="状态"
          prop="addressStatus"
          :formatter="
            row => $filter.dictConvert(row.addressStatus, 'AddressStatus')
          "
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(3)"
          label="姓名"
          prop="contName"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(3)"
          label="关系"
          prop="relation"
          :formatter="row => $filter.dictConvert(row.relation, 'Relationship')"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(8)"
          label="地址"
          prop="fullAddress"
        ></el-table-column>
        <el-table-column
          label="地址类型"
          prop="addressType"
          :formatter="
            row => $filter.dictConvert(row.addressType, 'AddressType')
          "
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          label="来源"
          prop="dataSource"
          :formatter="row => $filter.dictConvert(row.dataSource, 'DataSource')"
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          :min-width="$helper.getColumnWidth(5)"
          label="操作"
          v-if="!hiddenAction"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="addressClick(scope)" type="text" v-if="showAssistButton">外访协催</el-button>
            <el-button @click="dialog.letterPrint = true" type="text">信函</el-button> -->
            <el-button
              @click="onClickDelete(scope.row)"
              v-if="scope.row.dataSource === 'ADD'"
              :disabled="menuChannel === 44 || menuChannel === 34"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--申请弹框-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :title="`${applyType.name}申请`"
      :visible.sync="dialog.apply"
      width="800px"
    >
      <assist-apply
        :applyType="applyType.value"
        :caseIds="[caseId]"
        :isAddress="true"
        :otherData="{
          assistType: 'ASSIT_VISIT',
          personalAddressId: rowData.id,
          addressType: rowData.addressType,
          addressStatus: rowData.addressStatus
        }"
        @close="
          dialog.apply = false;
          refreshData();
        "
      />
    </el-dialog>

    <!--申请弹框-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.letterPrint"
      @open="$nextTick(() => $refs['letter-print'].refreshData())"
    >
      <letter-print
        @close="dialog.letterPrint = false"
        ref="letter-print"
      ></letter-print>
    </el-dialog>
    <!-- 新增地址 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.addAddress"
      title="新增地址"
      width="800px"
    >
      <add-address
        :caseId="caseId"
        @close="(dialog.addAddress = false), refreshData()"
      ></add-address>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { namespace } from "vuex-class";
import { Prop ,Watch } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { ApplyType, MENU_CHANNEL } from "~/config/enum.config";
import LetterPrint from "~/components/collection-execution/collection-add-list/letter-print.vue";
import AddAddress from "../collection-add-list/add-address.vue";
import AssistApply from "~/components/apply-component/assist-apply.vue";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    AddAddress,
    LetterPrint,
    AssistApply
  }
})
export default class AddressList extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private hiddenAction;
  @CollectionExecutionModule.State private menuChannel: MENU_CHANNEL;

  private applyType = ApplyType.assist;
  private searchModel: any = {};
  private dataSet: any[] = [];
  private dialog: any = {
    apply: false,
    letterPrint: false,
    addAddress: false
  };
  private rowData: any = {};

    @Watch("caseId") private change(val) {
    console.log('caseId',val);
    this.refreshData();
  }

  private get showAssistButton() {
    // 只有电催个人，电催团队才可以申请外访
    const s = [MENU_CHANNEL.Tel_personal, MENU_CHANNEL.Tel_team];
    return s.includes(this.menuChannel);
  }

  private addressClick(scope) {
    this.rowData = scope.row;
    if (scope.row.applyStatus === null) {
      this.dialog.apply = true;
    } else {
      this.$message.warning("此案件的协催申请正在审核中，不允许重复申请！");
    }
  }
  /**
   * 新增地址
   */
  private addAddressClick() {
    this.dialog.addAddress = true;
  }
  //获取电催行动历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.caseOperatorPageService
      .queryPersonalAddress(
        this.searchModel,
        this.pageService,
        this.sortService
      )
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private letterClick() {}

  private activated() {
    this.refreshData();
  }

  private onClickDelete(row) {
    this.caseOperatorPageService
      .deletePersonalAddress({ id: row.id, caseId: this.caseId })
      .subscribe(data => {
        this.refreshData();
      });
  }
}
</script>

<style lang="less" scoped></style>
